<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="search">
      <div class="header">
        <el-row>
          <el-col :span="6">
            <!-- :model="ruleForm" -->
            <!-- :rules="rules" -->
            <el-form ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="素材名称"
                            prop="name">
                <!-- v-model="ruleForm.name" -->
                <el-input v-model="materialName"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="上传者ID"
                            prop="name">
                <!-- v-model="ruleForm.name" -->
                <el-input v-model="inputId"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="素材类别"
                            prop="name">

                <el-select v-model="some1"
                           placeholder="请选择">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
                <el-select v-model="mat_Form1.mat_class1"
                           placeholder="请选择">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="btn">
              <el-button size="small"
                         @click="inquire">查询</el-button>
              <el-button size="small"
                         @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-table :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column prop="name"
                             label="素材名称">
            </el-table-column>
            <el-table-column label="素材图"
                             width="180">
              <template slot-scope="scope">
                <el-image style="width: 100px; height: 100px"
                          :src="scope.row.mat_img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="category"
                             label="素材类别">
            </el-table-column>
            <el-table-column prop="price"
                             label="价格">
            </el-table-column>
            <el-table-column prop="uploader_id"
                             label="上传者ID">
            </el-table-column>
            <el-table-column prop="phone"
                             label="联系电话">
            </el-table-column>
            <el-table-column prop="date"
                             label="提交审核日期">
            </el-table-column>
            <el-table-column prop="state"
                             label="审核状态">
              <template v-slot="scope">
                <el-tag v-if='scope.row.state'
                        type="success">审核通过</el-tag>
                <el-tag v-else
                        type="warning">待审核</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="auditDate"
                             label="审核日期">
              <template v-slot="scope">
                <span v-if="scope.row.state">{{scope.row.auditDate}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="comment"
                             label="审核备注">
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button v-if="scope.row.state!==true"
                           @click="audit(scope.row)">审核素材</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
    </el-card>
    <el-dialog title="是否确认通过/不通过“xxxx”素材的审核？"
               :visible.sync="auditDialogVisible"
               width="50%">
      <p>审核备注</p>
      <span>
        <el-input v-model="input"></el-input>
      </span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitAudi">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import '@/mock/sourcecheck'
export default {
  name: 'sourcecheck',

  components: {},

  props: {},

  data () {
    return {
      options: [
        {
          value: '减肥中心',
          label: '减肥中心'
        },
        {
          value: '七七酒店',
          label: '七七酒店'
        },
        {
          value: '私人影院',
          label: '私人影院'
        },
        {
          value: '盲人按摩',
          label: '盲人按摩'
        }
      ],
      some1: '',
      mat_Form1: {
        mat_name: '',
        mat_class: '',
        mat_class1: '',
        mat_count: '',
        mat_img: ''
      },
      tableData: [],
      row: {},
      auditDialogVisible: false,
      input: '',
      materialName: '',
      inputId: ''
    }
  },
  created () {
    this.getSourcecheck()
  },
  mounted () {

  },
  methods: {
    async getSourcecheck () {
      const { data } = await this.$http.get('/sourcecheck')
      this.tableData = data.list
    },
    handleChange () {

    },
    sonHandleChange () {

    },
    audit (row) {
      this.row = row
      this.auditDialogVisible = true
    },
    submitAudi () {
      this.tableData.forEach(item => {
        if (item.uploader_id === this.row.uploader_id) {
          item.state = !item.state
          item.comment = this.input
          this.auditDialogVisible = false
        }
      })
      this.input = ''
    },
    inquire () {
      var arr = []
      this.tableData.forEach(item => {
        if (item.name.indexOf(this.materialName) !== -1 && this.materialName.trim() !== '') {
          return arr.push(item)
        }
        if (item.uploader_id === this.inputId && this.inputId.trim() !== '') {
          return arr.push(item)
        }
      })
      this.tableData = arr
    },
    reset () {
      this.inputId = ''
      this.materialName = ''
      this.getSourcecheck()
    }
  }
}
</script>

<style scoped lang="less">
.header {
  .btn {
    margin-left: 250px;
  }
}
</style>
